<template>
  <div class="min-h-screen bg-gray-100">
    <div class="wrapper">
      <!-- header部分 -->
      <header class="fixed top-0 left-0 w-full h-12vw bg-blue-500 text-white text-4.8vw z-1000 flex justify-center items-center">
        <p>我的订单</p>
      </header>

      <!-- 未支付订单部分 -->
      <h3 class="mt-12vw box-border p-4vw text-4vw font-light text-gray-500">未支付订单信息：</h3>
      <ul class="order w-full">
        <li
            v-for="(order, index) in unpaidOrders"
            :key="'unpaid-' + index"
            class="w-full"
        >
          <div class="order-info box-border p-2vw-4vw text-4vw text-gray-600 flex justify-between items-center">
            <p>
              {{ order.business }}
              <i
                  class="fa ml-1vw cursor-pointer"
                  :class="order.expanded ? 'fa-caret-up' : 'fa-caret-down'"
                  @click="toggleOrder('unpaid', index)"
              ></i>
            </p>
            <div class="order-info-right flex">
              <p class="mr-2vw">&#165;{{ order.total }}</p>
              <div
                  class="order-info-right-icon bg-orange-400 text-white rounded-3px px-2vw cursor-pointer"
                  @click="goToPayment(order)"
              >
                去支付
              </div>
            </div>
          </div>
          <ul
              v-show="order.expanded"
              class="order-detailet w-full"
          >
            <li
                v-for="(item, itemIndex) in order.items"
                :key="'unpaid-item-' + itemIndex"
                class="w-full box-border p-1vw-4vw text-3vw text-gray-600 flex justify-between items-center"
            >
              <p>{{ item.name }} x {{ item.quantity }}</p>
              <p>&#165;{{ item.price }}</p>
            </li>
            <li class="w-full box-border p-1vw-4vw text-3vw text-gray-600 flex justify-between items-center">
              <p>配送费</p>
              <p>&#165;{{ order.deliveryFee }}</p>
            </li>
          </ul>
        </li>
      </ul>

      <!-- 已支付订单部分 -->
      <h3 class="mt-4vw box-border p-4vw text-4vw font-light text-gray-500">已支付订单信息：</h3>
      <ul class="order w-full">
        <li
            v-for="(order, index) in paidOrders"
            :key="'paid-' + index"
            class="w-full"
        >
          <div class="order-info box-border p-2vw-4vw text-4vw text-gray-600 flex justify-between items-center">
            <p>
              {{ order.business }}
              <i
                  class="fa ml-1vw cursor-pointer"
                  :class="order.expanded ? 'fa-caret-up' : 'fa-caret-down'"
                  @click="toggleOrder('paid', index)"
              ></i>
            </p>
            <div class="order-info-right flex">
              <p>&#165;{{ order.total }}</p>
            </div>
          </div>
          <ul
              v-show="order.expanded"
              class="order-detailet w-full"
          >
            <li
                v-for="(item, itemIndex) in order.items"
                :key="'paid-item-' + itemIndex"
                class="w-full box-border p-1vw-4vw text-3vw text-gray-600 flex justify-between items-center"
            >
              <p>{{ item.name }} x {{ item.quantity }}</p>
              <p>&#165;{{ item.price }}</p>
            </li>
            <li class="w-full box-border p-1vw-4vw text-3vw text-gray-600 flex justify-between items-center">
              <p>配送费</p>
              <p>&#165;{{ order.deliveryFee }}</p>
            </li>
          </ul>
        </li>
      </ul>

      <!-- 底部菜单部分 -->
      <FooterNav />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from "@/components/FooterNav.vue";

const router = useRouter()

// 未支付订单数据
const unpaidOrders = ref([
  {
    business: '万家饺子（软件园E18店）',
    total: 49,
    deliveryFee: 3,
    expanded: false,
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 16 }
    ]
  },
  {
    business: '小锅饭豆腐馆（全运店）',
    total: 55,
    deliveryFee: 3,
    expanded: false,
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 16 }
    ]
  }
])

// 已支付订单数据
const paidOrders = ref([
  {
    business: '万家饺子（软件园E18店）',
    total: 49,
    deliveryFee: 3,
    expanded: false,
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 16 }
    ]
  },
  {
    business: '小锅饭豆腐馆（全运店）',
    total: 55,
    deliveryFee: 3,
    expanded: false,
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 16 }
    ]
  }
])




// 切换订单详情显示
const toggleOrder = (type: string, index: number) => {
  if (type === 'unpaid') {
    unpaidOrders.value[index].expanded = !unpaidOrders.value[index].expanded
  } else {
    paidOrders.value[index].expanded = !paidOrders.value[index].expanded
  }
}

// 跳转到支付页面
const goToPayment = (order: any) => {
  router.push({
    name: 'payment',
    state: { order }
  })
}

</script>

<style scoped>
/* 添加一些UnoCSS不支持的特定样式 */
.order-info {
  padding: 2vw 4vw;
}

.order-detailet li {
  padding: 1vw 4vw;
}

.order-info-right-icon {
  padding: 0.5vw 1vw;
  user-select: none;
}
</style>
